/**
 * Created by zzy on 2017/9/10.
 */
import React,{Component} from 'react';
import {Image,View,Text} from 'react-native';

import {TabNavigator,TabBarBottom} from 'react-navigation';
import HomeLuo from './homeLuo/HomeLuo';
import WaterStationList from './station/WaterStationList';
import ShoppingCart from '../js/home/ShoppingCart'
import MeLuo from './meLuo/MeLuo';
import shoppingCartStore from './store/ShoppingCartStore'
import {observer} from 'mobx-react/native'

const Tab = TabNavigator(
    {
        Home:{
            screen:HomeLuo,
            navigationOptions:({navigation}) => ({
                tabBarLabel:'订水',
                tabBarIcon:({focused,tintColor}) => (
                    <TabBarItem
                        tintColor={tintColor}
                        focused={focused}
                        normalImage={require('../luoasserts/tab/tab_icon_order-water_d.png')}
                        selectedImage={require('../luoasserts/tab/tab_icon_order-water_s.png')}
                    />
                )
            }),
        },

        Promotion:{
            screen:WaterStationList,
            navigationOptions:({navigation}) => ({
                tabBarLabel:'水站',
                tabBarIcon:({focused,tintColor}) => (
                    <TabBarItem
                        tintColor={tintColor}
                        focused={focused}
                        normalImage={require('../luoasserts/tab/tab_icon_water_station_d.png')}
                        selectedImage={require('../luoasserts/tab/tab_icon_water_station_s.png')}
                    />
                )
            }),
        },

        Discover:{
            screen:ShoppingCart,
            navigationOptions:({navigation}) => ({
                tabBarLabel:'购物车',
                tabBarIcon:({focused,tintColor}) => (
                    <TabBarItem
                        tintColor={tintColor}
                        focused={focused}
                        normalImage={require('../luoasserts/tab/tab_icon_shoppingcart_d.png')}
                        selectedImage={require('../luoasserts/tab/tab_icon_shoppingcart_s.png')}
                        shopCartCount={true}
                    />
                )
            }),
        },
        Me:{
            screen:MeLuo,
            navigationOptions:({navigation}) => ({
                tabBarLabel:'我',
                tabBarIcon:({focused,tintColor}) => (
                    <TabBarItem
                        tintColor={tintColor}
                        focused={focused}
                        normalImage={require('../luoasserts/tab/tab_icon_me_d.png')}
                        selectedImage={require('../luoasserts/tab/tab_icon_me_s.png')}
                    />
                )
            }),
        },
    },

    {
        tabBarComponent:TabBarBottom,
        tabBarPosition:'bottom',
        swipeEnabled:false,
        animationEnabled:false,
        lazy:true,
        tabBarOptions:{
            activeTintColor:'#13A9ED',
            inactiveTintColor:'#979797',
            style:{backgroundColor:'#fff',},
            labelStyle: {
                fontSize: 13, // 文字大小
            },
        }

    }

);
@observer
class TabBarItem extends Component {

    render() {
        return(
            <View>
            <Image source={ this.props.focused ? this.props.selectedImage : this.props.normalImage }
                   style={ { tintColor:this.props.tintColor,width:25,height:25 } }
            />
                {
                    this.props.shopCartCount&&shoppingCartStore.selectCount!=0?<View
                        style={{height:17,borderRadius:11,backgroundColor:'red',position:'absolute',right:-10,top:0,justifyContent:'center',alignItems:'center'}}>
                        <Text style={{color:'#fff',fontSize:13}}>{'  '+shoppingCartStore.selectCount+'  '}</Text>
                    </View>:(null)
                }

            </View>
        )
    }

}

module.exports=Tab;